<template>
  <view class="content">
    <u-sticky>
      <view class="header">
        <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :barStyle="barStyle"
          active-color="#fff" inactive-color="#fff" bg-color="#262626">
        </u-tabs>
      </view>
    </u-sticky>

    <view class="tuijian">
      <view class="tuijian_con" v-for="(item, i) in orderlist" :key="i" v-if="orderlist != ''" @click="goDetail(item)">
        <view class="sec_top">
          <view class="title">
            {{ item.statusStr }}
          </view>
        </view>
        <view class="sec_center" v-for="(it, index) in item.goods_list" :key="index">
          <view class="center">
            <image :src="it.goods_pic" mode="aspectFit"></image>
          </view>
          <view class="right">
            <text class="name">{{ it.goods_name }}</text>
            <view class="box_chima">
              <text class="number">￥{{ it.total_price }}</text>
              <text class="price">x{{ it.num }}</text>
            </view>
          </view>
        </view>
        <view class="sec_footer">
          <view class=""></view>
          <view class="footer_right">
            <view class="back flexs" @click.stop="gosbumit(1, item.order_id)"
              v-if="item.is_pay == 0 && item.is_cancel == 0">
              取消交易
            </view>
            <view class="zhifu flexs allbtn" v-if="item.is_pay == 0 && item.is_cancel == 0"
              @click.stop="gosbumit(2, item.order_id)">
              立即支付
            </view>
          </view>
        </view>
      </view>
    </view>
    <Empty v-if="orderlist == ''" avative />
    <u-modal v-model="quxiaoStatus" content="确定取消交易吗?" :show-cancel-button="true" @confirm="payConfirm_quxiao">
    </u-modal>
    <u-popup v-model="payshow" mode="center" border-radius="10" :closeable="true">
      <view class="popup">
        <view class="popsec">
          <view class="toptwo" @click="fukuancheck(1)" v-if="walletData.weixin_pay_status == 'on'">
            <view class="left">
              <image :src="iconurl + '/static/mall/wx.png'" mode=""></image>
              <text>微信</text>
            </view>
            <image :src="iconurl + '/static/newImg/weixuan.png'" v-if="ptype != 1" @click="fukuancheck(1)">
            </image>
            <image :src="iconurl + '/static/newImg/yes.png'" v-else @click="fukuancheck(1)">
            </image>
          </view>
          <!-- #ifdef APP-PLUS -->
          <view class="toptwo" @click="fukuancheck(2)" v-if="walletData.alipay_status == 'on'">
            <view class="left">
              <image src="https://pd.pdaxiang.com/upload/static/mall/zfb.png" mode=""></image>
              <text>支付宝</text>
            </view>
            <image :src="iconurl + '/static/newImg/weixuan.png'" v-if="ptype != 2" @click="fukuancheck(2)">
            </image>
            <image :src="iconurl + '/static/newImg/yes.png'" v-else @click="fukuancheck(2)">
            </image>
          </view>
          <!-- #endif -->
        </view>
        <view class="popfoot" @click="opensubmit"><text>确定</text></view>
      </view>
    </u-popup>
    <u-loadmore :status="morestatus" v-if="orderlist != ''" :load-text="loadText" />
    <u-popup mode="center" v-model="urlpayStatus">
      <view class="webcenter">
        结算
      </view>
    </u-popup>
  </view>
</template>

<script>
import Empty from '@/components/empty/empty.vue'
import wxPopupOrder from '@/components/wx_pay/wx_pay_popup.vue'
export default {
  components: {
    Empty,
    wxPopupOrder
  },
  data() {
    return {
      payurl: '',
      order_id: '',
      getjieguodingshi: null,
      urlpayStatus: false,
      loadText: {
        loadmore: '上拉加载更多',
        loading: '正在加载，请喝杯茶',
        nomore: '我是有底线的'
      },
      morestatus: 'loadmore',
      ptype: 1,
      payshow: false,
      quxiaoStatus: false,
      current: 0,
      list: [
        {
          name: '全部订单'
        },
        {
          name: '待付款'
        },
        {
          name: '待发货'
        },
        {
          name: '已完成'
        },
        {
          name: '已取消'
        }
      ],
      orderlist: [],
      page: 1,
      walletData: {}, //余额
      iconurl: this.$configs.urls,
      code: '',
      codeUrl: ''
    }
  },
  onLoad(e) {
    ////console.log(e)
    if (e.current) {
      this.current = e.current
    } else {
      this.current = e.type
    }
  },
  onHide() {
    this.page = 1
    this.getlist()
    this.getwallet() //钱包
  },
  onShow() {
    // #ifdef MP-WEIXIN
    this.getcode()
    // #endif
    this.getwallet() //钱包
    this.getlist()
  },
  onPullDownRefresh() {
    this.page = 1
    this.orderlist = []
    this.getlist()
  },
  onReachBottom() {
    this.page++
    this.morestatus = 'loading'
    this.getlist(2)
  },
  methods: {
    getjieguo() {
      let data = {
        order_id: this.order_id
      }
      this.$Request.get(this.$api.index.payResult, data).then(res => {
        if (res.data.is_pay == 1) {
          clearInterval(this.getjieguodingshi)
          this.urlpayStatus = false
          setTimeout(() => {
            this.page = 1
            this.orderlist = []
            this.getlist()
          }, 800)
          clearTimeout();
        }
      })
    },
    getwallet() {
      this.$Request.get(this.$api.user.wallet).then(res => {
        this.walletData = res.data
        if (res.data.weixin_pay_status == 'on') {
          this.ptype = 1
          return
        }
        if (res.data.alipay_status == 'on') {
          this.ptype = 2
          return
        }
      })
    },
    fukuancheck(ptype) {
      this.ptype = ptype
    },
    payConfirm_quxiao() {
      let data = {
        order_id: this.order_id
      }
      this.$Request.get(this.$api.mall.cancel, data).then(res => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        setTimeout(() => {
          this.page = 1
          this.orderlist = []
          this.getlist()
        }, 800)
        clearTimeout();
      })
    },
    getcode() {
      let that = this
      uni.login({
        provider: 'weixin',
        success: function (res) {
          that.code = res.code
        }
      })
    },
    //确定支付
    opensubmit() {
      // #ifdef APP-PLUS
      let data = {
        order_id: this.order_id,
        pay_type: this.ptype,
        is_repeat_pay: 1
      }
      // #endif
      // #ifdef MP-WEIXIN
      let data = {
        js_code: this.code,
        order_id: this.order_id,
        pay_type: this.ptype,
        is_xwechat: 1,
        wechat_type: uni.getStorageSync('wechat_type'),
      }
      // #endif
      this.$Request.get(this.$api.order.sendPayData, data).then(res => {
        if (res.data.status == 0) {
          //调用微信或者支付宝
          this.payurl = res.data.pay_data
          this.order_id = res.data.order_id
          this.Payment(res.data.pay_data)
        } else if (res.data.status == 1) {
          //已支付
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 1500
          })
          setTimeout(() => {
            this.getlist()
          }, 1600)
          clearTimeout();
        }
      })
    },
    Payment(pay_data) {
      let provider = ''
      if (this.ptype == 1) {
        provider = 'wxpay'
      } else {
        provider = 'alipay'
      }
      //调用支付
      let that = this
      uni.requestPayment({
        provider: provider,
        // #ifdef APP-PLUS
        orderInfo: pay_data,
        // #endif
        // #ifdef MP-WEIXIN
        timeStamp: pay_data.timeStamp,
        nonceStr: pay_data.nonceStr,
        signType: 'MD5',
        package: pay_data.package,
        paySign: pay_data.paySign,
        // #endif
        success() {
          uni.showToast({
            title: '支付成功',
            icon: 'none'
          })
          uni.redirectTo({
            url: '/userPage/user/fahuoOrder/fahuoOrder'
          })
        },
        fail(res) {
          ////console.log('失败', res)
          that.payshow = false
          uni.showToast({
            title: '订单未支付',
            icon: 'none',
            duration: 1500
          })
        }
      })
    },
    gosbumit(is, order_id) {
      this.order_id = order_id
      if (is == 1) {
        //取消交易
        this.quxiaoStatus = true
      } else {
        //支付
        this.payshow = true
      }
    },
    getlist(type) {
      let data = {
        page: this.page,
        status: this.current
      }
      uni.showLoading({
        title: '加载中...'
      })
      this.$Request.get(this.$api.order.sendOrderList, data).then(res => {
        uni.stopPullDownRefresh()
        uni.hideLoading()
        if (type == 2) {
          this.orderlist = this.orderlist.concat(res.data.list)
          if (res.data.list == '') {
            this.morestatus = 'nomore'
          }
        } else {
          this.orderlist = res.data.list
          this.morestatus = 'loadmore'
        }
      })
    },
    goDetail(order_id) {
      uni.navigateTo({
        url:
          '/userPage/user/fahuoOrder/fahuoOrderDetail?order_id=' +
          order_id.order_id +
          '&order_type=' +
          this.current +
          '&statusStr=' +
          order_id.statusStr
      })
    },
    change(index) {
      this.current = index
      this.orderlist = []
      this.page = 1
      this.getlist()
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background: #262626;

  .popup {
    height: 584rpx;
    width: 640rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .delete {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      right: 20rpx;
      top: 20rpx;
    }

    .popfoot {
      display: flex;
      justify-content: center;
      align-items: center;

      width: 486rpx;
      height: 80rpx;
      background: #6792dd;
      opacity: 1;
      border-radius: 40rpx;
      //   margin: 100rpx 0;
      margin: 50rpx 0;
      color: #ffffff;
    }

    .popsec {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 60rpx;
      padding-right: 40rpx;
      padding-left: 60rpx;

      .topone {
        width: 610rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        image {
          width: 46rpx;
          height: 46rpx;
          margin-right: 30rpx;
          position: relative;
          top: 12upx;
        }

        text {
          color: #999999;
          font-size: 34rpx;
        }
      }

      .toptwo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 28rpx;

        image {
          width: 46rpx;
          height: 46rpx;
          margin-right: 30rpx;
          position: relative;
          top: 12upx;
        }

        text {
          color: #999999;
          font-size: 34rpx;
        }
      }
    }
  }

  .tuijian {
    // background: #ffffff;
    // padding-top: 20rpx;
    padding-bottom: 20rpx;
    position: relative;

    .sec_footer {
      display: flex;
      justify-content: space-between;

      .footer_right {
        display: flex;
        align-items: center;

        .back {
          width: 163rpx;
          height: 54rpx;
          border: 1rpx solid #FED187;
          
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #FED187;
          border-radius: 100rpx;
        }

        .zhifu {
          width: 163rpx;
          height: 54rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          border-radius: 100rpx;
          margin-left: 50rpx;
          background: #FED187;
        }
      }
    }

    .sec_right {
      position: absolute;
      right: 40rpx;
      top: 40rpx;

      text {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 800;
        color: #000000;
      }
    }

    .sec_bottom {
      .view_title {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
      }

      .bom {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 22rpx;

        .left {
          display: flex;
          align-items: center;

          text:nth-child(1) {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #000000;
            max-width: 240rpx;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }

        .right {
          font-size: 29rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          text-align: center;
          line-height: 24rpx;
          background: #fd8e1b;
          border-radius: 10rpx;
          padding: 8rpx 26rpx 8rpx 26rpx;
        }
      }
    }

    .tuijian_con {
      width: 710rpx;
      margin: 0 auto;
      padding: 20rpx;
      background-size: 100% 100% !important;
      background-repeat: no-repeat !important;
      margin-bottom: 10rpx;
      background: rgba(255, 231, 192, 0.1);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      opacity: 1;
      border: 2rpx solid #FED187;

      .sec_top {
        .title {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #fff;
        }
      }

      .sec_center {
        width: 710rpx;
        margin: 0 auto;
        display: flex;
        position: relative;

        .center {
          padding: 10rpx 0 10rpx 0;

          background: #262626;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          opacity: 1;
          border: 2rpx solid #FED187;

          image {
            width: 218rpx;
            height: 220rpx;
            border-radius: 10rpx;
          }
        }

        .right {
          margin-left: 20rpx;
          display: flex;
          flex-direction: column;
          padding: 0 20rpx 0 0;
          box-sizing: border-box;
          min-width: 414rpx;

          .box_chima {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 46rpx;

            .guige {
              font-size: 28rpx;
              font-weight: 400;
              color: #333333;
            }

            .price {
              font-size: 26rpx;
              font-weight: 500;
              color: #fff;
            }

            .number {
              font-size: 40rpx;
              font-weight: 400;
              color: #FFAE2A;
            }
          }

          .box_num {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 28rpx;

            .box_num_left {
              display: flex;
              flex-wrap: wrap;

              .guige {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
              }
            }

            .number {
              font-size: 40rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #f46e13;
            }
          }

          .name {
            max-width: 340rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fff;
            margin-top: 6rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-align: justify;
            overflow: hidden;
            margin-top: 40rpx;
          }

          .cont {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #e80303;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-align: justify;
            overflow: hidden;
            padding-right: 20rpx;
            box-sizing: border-box;
          }

          .bom {
            min-width: 320rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 2rpx;

            .left {
              display: flex;
              align-items: center;

              text:nth-child(1) {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #000000;
              }
            }

            .right {
              font-size: 29rpx;
              font-family: PingFang SC;
              font-weight: bold;
              color: #ffffff;
              text-align: center;
              line-height: 24rpx;
              background: #fd8e1b;
              border-radius: 10rpx;
              padding: 16rpx 26rpx 16rpx 26rpx;
            }
          }
        }
      }
    }
  }
}
</style>
